<template>
  <div class="mobile-family-manage">
    <!-- 家庭信息卡片 -->
    <div class="family-info-card glass-card">
      <div class="family-header">
        <div class="family-avatar">
          <img
            v-if="familyInfo.avatar"
            :alt="familyInfo.name"
            :src="familyInfo.avatar"
          />
          <tiny-icon-group v-else />
        </div>
        <div class="family-details">
          <h2 class="family-name">{{ familyInfo.name }}</h2>
          <p class="family-desc">{{ familyInfo.description || '一个温馨的家庭' }}</p>
          <div class="family-stats">
            <div class="stat-item">
              <span class="stat-number">{{ familyInfo.memberCount }}</span>
              <span class="stat-label">成员</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">{{ familyInfo.mediaCount }}</span>
              <span class="stat-label">媒体</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">{{ familyInfo.storageUsed }}</span>
              <span class="stat-label">存储</span>
            </div>
          </div>
        </div>
        <button class="edit-family-btn" @click="editFamilyInfo">
          <tiny-icon-edit />
        </button>
      </div>

      <!-- 存储使用情况 -->
      <div class="storage-progress">
        <div class="progress-header">
          <span>存储使用情况</span>
          <span>{{ familyInfo.storageUsed }} / {{ familyInfo.storageLimit }}</span>
        </div>
        <div class="progress-bar">
          <div
            :class="{ warning: storagePercentage > 80, danger: storagePercentage > 95 }"
            :style="{ width: storagePercentage + '%' }"
            class="progress-fill"
          ></div>
        </div>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="function-menu">
      <div class="menu-section">
        <h3 class="section-title">家庭管理</h3>
        <div class="menu-grid">
          <button class="menu-item glass-card" @click="showMemberManage">
            <div class="menu-icon">
              <tiny-icon-group />
            </div>
            <div class="menu-content">
              <span class="menu-title">成员管理</span>
              <span class="menu-subtitle">{{ familyInfo.memberCount }} 人</span>
            </div>
            <tiny-icon-chevron-right class="menu-arrow" />
          </button>

          <button class="menu-item glass-card" @click="showInviteManage">
            <div class="menu-icon">
              <tiny-icon-user-add />
            </div>
            <div class="menu-content">
              <span class="menu-title">邀请管理</span>
              <span class="menu-subtitle">{{ pendingInvites }} 个待处理</span>
            </div>
            <tiny-icon-chevron-right class="menu-arrow" />
          </button>

          <button class="menu-item glass-card" @click="showRoleManage">
            <div class="menu-icon">
              <tiny-icon-user />
            </div>
            <div class="menu-content">
              <span class="menu-title">权限管理</span>
              <span class="menu-subtitle">角色与权限</span>
            </div>
            <tiny-icon-chevron-right class="menu-arrow" />
          </button>

          <button class="menu-item glass-card" @click="showStorageManage">
            <div class="menu-icon">
              <tiny-icon-folder />
            </div>
            <div class="menu-content">
              <span class="menu-title">存储管理</span>
              <span class="menu-subtitle">{{ familyInfo.storageUsed }}</span>
            </div>
            <tiny-icon-chevron-right class="menu-arrow" />
          </button>
        </div>
      </div>

      <div class="menu-section">
        <h3 class="section-title">内容管理</h3>
        <div class="menu-grid">
          <button class="menu-item glass-card" @click="showSharedAlbums">
            <div class="menu-icon">
              <tiny-icon-image />
            </div>
            <div class="menu-content">
              <span class="menu-title">共享相册</span>
              <span class="menu-subtitle">{{ sharedAlbumsCount }} 个相册</span>
            </div>
            <tiny-icon-chevron-right class="menu-arrow" />
          </button>

          <button class="menu-item glass-card" @click="showActivityLog">
            <div class="menu-icon">
              <tiny-icon-time />
            </div>
            <div class="menu-content">
              <span class="menu-title">活动日志</span>
              <span class="menu-subtitle">最近动态</span>
            </div>
            <tiny-icon-chevron-right class="menu-arrow" />
          </button>

          <button class="menu-item glass-card" @click="showPrivacySettings">
            <div class="menu-icon">
              <tiny-icon-lock />
            </div>
            <div class="menu-content">
              <span class="menu-title">隐私设置</span>
              <span class="menu-subtitle">分享与可见性</span>
            </div>
            <tiny-icon-chevron-right class="menu-arrow" />
          </button>

          <button class="menu-item glass-card" @click="showBackupSettings">
            <div class="menu-icon">
              <tiny-icon-cloud />
            </div>
            <div class="menu-content">
              <span class="menu-title">备份设置</span>
              <span class="menu-subtitle">云端同步</span>
            </div>
            <tiny-icon-chevron-right class="menu-arrow" />
          </button>
        </div>
      </div>
    </div>

    <!-- 成员管理面板 -->
    <transition name="slide-up">
      <div v-if="memberManageVisible" class="member-manage-panel">
        <div class="panel-overlay" @click="hideMemberManage"></div>
        <div class="panel-content glass-card">
          <div class="panel-header">
            <h3>家庭成员</h3>
            <button class="close-btn" @click="hideMemberManage">
              <tiny-icon-close />
            </button>
          </div>

          <div class="panel-body">
            <!-- 添加成员 -->
            <div class="add-member-section">
              <button class="add-member-btn" @click="showInviteDialog">
                <tiny-icon-plus />
                <span>邀请新成员</span>
              </button>
            </div>

            <!-- 成员列表 -->
            <div class="member-list">
              <div
                v-for="member in familyMembers"
                :key="member.userId"
                class="member-item"
              >
                <div class="member-avatar">
                  <img
                    v-if="member.avatar"
                    :alt="member.nickname"
                    :src="member.avatar"
                  />
                  <tiny-icon-user v-else />
                </div>

                <div class="member-info">
                  <div class="member-name">
                    {{ member.nickname }}
                    <span v-if="member.isOwner" class="owner-badge">家长</span>
                    <span v-else-if="member.isAdmin" class="admin-badge">管理员</span>
                  </div>
                  <div class="member-role">{{ member.roleName }}</div>
                  <div class="member-stats">
                    <span>上传 {{ member.uploadCount }} 个文件</span>
                    <span>存储 {{ member.storageUsed }}</span>
                  </div>
                </div>

                <div class="member-actions">
                  <button
                    v-if="!member.isOwner && canManageMembers"
                    class="action-btn"
                    @click="showMemberActions(member)"
                  >
                    <tiny-icon-more />
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 邀请对话框 -->
    <transition name="modal">
      <div v-if="inviteDialogVisible" class="invite-dialog-overlay" @click="hideInviteDialog">
        <div class="invite-dialog glass-card" @click.stop>
          <div class="dialog-header">
            <h3>邀请新成员</h3>
            <button class="close-btn" @click="hideInviteDialog">
              <tiny-icon-close />
            </button>
          </div>

          <div class="dialog-content">
            <div class="invite-methods">
              <button class="invite-method" @click="inviteByPhone">
                <tiny-icon-phone />
                <span>手机号邀请</span>
              </button>
              <button class="invite-method" @click="inviteByEmail">
                <tiny-icon-mail />
                <span>邮箱邀请</span>
              </button>
              <button class="invite-method" @click="generateInviteLink">
                <tiny-icon-link />
                <span>生成邀请链接</span>
              </button>
              <button class="invite-method" @click="showQRCode">
                <tiny-icon-qrcode />
                <span>二维码邀请</span>
              </button>
            </div>

            <div v-if="inviteMethod" class="invite-form">
              <div v-if="inviteMethod === 'phone'" class="form-group">
                <label>手机号码</label>
                <input
                  v-model="invitePhone"
                  class="form-input"
                  placeholder="输入要邀请的手机号"
                  type="tel"
                />
              </div>

              <div v-if="inviteMethod === 'email'" class="form-group">
                <label>邮箱地址</label>
                <input
                  v-model="inviteEmail"
                  class="form-input"
                  placeholder="输入要邀请的邮箱"
                  type="email"
                />
              </div>

              <div v-if="inviteMethod === 'link'" class="form-group">
                <label>邀请链接</label>
                <div class="link-group">
                  <input
                    :value="inviteLink"
                    class="form-input readonly"
                    readonly
                  />
                  <button class="copy-btn" @click="copyInviteLink">
                    <tiny-icon-copy />
                  </button>
                </div>
                <p class="link-desc">链接有效期：7天</p>
              </div>

              <div v-if="inviteMethod === 'qrcode'" class="form-group">
                <div class="qrcode-container">
                  <div class="qrcode-placeholder">
                    <tiny-icon-qrcode />
                    <p>二维码</p>
                  </div>
                </div>
                <p class="qrcode-desc">请让对方扫描此二维码加入家庭</p>
              </div>

              <div class="role-selection">
                <label>邀请角色</label>
                <div class="role-options">
                  <label class="role-option">
                    <input v-model="inviteRole" type="radio" value="member" />
                    <span>普通成员</span>
                  </label>
                  <label class="role-option">
                    <input v-model="inviteRole" type="radio" value="admin" />
                    <span>管理员</span>
                  </label>
                </div>
              </div>

              <div class="form-actions">
                <button class="form-btn secondary" @click="cancelInvite">取消</button>
                <button class="form-btn primary" @click="sendInvite">发送邀请</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </transition>

    <!-- 成员操作菜单 -->
    <transition name="slide-up">
      <div v-if="memberActionsVisible" class="member-actions-menu">
        <div class="actions-overlay" @click="hideMemberActions"></div>
        <div class="actions-content glass-card">
          <div class="actions-header">
            <div class="member-info">
              <div class="member-avatar">
                <img
                  v-if="selectedMember?.avatar"
                  :alt="selectedMember.nickname"
                  :src="selectedMember.avatar"
                />
                <tiny-icon-user v-else />
              </div>
              <div class="member-details">
                <div class="member-name">{{ selectedMember?.nickname }}</div>
                <div class="member-role">{{ selectedMember?.roleName }}</div>
              </div>
            </div>
          </div>

          <div class="actions-list">
            <button class="action-item" @click="changeRole">
              <tiny-icon-user />
              <span>修改角色</span>
            </button>
            <button class="action-item" @click="setPermissions">
              <tiny-icon-setting />
              <span>设置权限</span>
            </button>
            <button class="action-item" @click="viewMemberStats">
              <tiny-icon-chart />
              <span>查看统计</span>
            </button>
            <button class="action-item danger" @click="removeMember">
              <tiny-icon-delete />
              <span>移除成员</span>
            </button>
          </div>
        </div>
      </div>
    </transition>

    <!-- 活动日志 -->
    <transition name="slide-up">
      <div v-if="activityLogVisible" class="activity-log-panel">
        <div class="panel-overlay" @click="hideActivityLog"></div>
        <div class="panel-content glass-card">
          <div class="panel-header">
            <h3>活动日志</h3>
            <button class="close-btn" @click="hideActivityLog">
              <tiny-icon-close />
            </button>
          </div>

          <div class="panel-body">
            <div class="activity-filters">
              <button
                v-for="filter in activityFilters"
                :key="filter.value"
                :class="{ active: activeFilter === filter.value }"
                class="filter-btn"
                @click="setActivityFilter(filter.value)"
              >
                {{ filter.label }}
              </button>
            </div>

            <div class="activity-list">
              <div
                v-for="activity in filteredActivities"
                :key="activity.id"
                class="activity-item"
              >
                <div :class="activity.type" class="activity-icon">
                  <component :is="getActivityIcon(activity.type)" />
                </div>
                <div class="activity-content">
                  <div class="activity-text">{{ activity.description }}</div>
                  <div class="activity-time">{{ formatTime(activity.createTime) }}</div>
                </div>
                <div class="activity-user">
                  <div class="user-avatar">
                    <img
                      v-if="activity.userAvatar"
                      :alt="activity.userName"
                      :src="activity.userAvatar"
                    />
                    <tiny-icon-user v-else />
                  </div>
                </div>
              </div>
            </div>

            <div v-if="hasMoreActivities" class="load-more">
              <button class="load-more-btn" @click="loadMoreActivities">
                <tiny-loading v-if="loadingActivities" size="small" />
                <span>{{ loadingActivities ? '加载中...' : '加载更多' }}</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
import { TinyMessage as Message } from '@opentiny/vue'

// 响应式数据
const familyInfo = ref({
  id: '1',
  name: '我的家庭',
  description: '一个温馨的大家庭',
  avatar: '',
  memberCount: 5,
  mediaCount: 1248,
  storageUsed: '12.8 GB',
  storageLimit: '50 GB',
  storageUsedBytes: 13743895347,
  storageLimitBytes: 53687091200
})

const familyMembers = ref([
  {
    userId: '1',
    nickname: '爸爸',
    avatar: 'https://picsum.photos/60/60?random=1',
    roleName: '家长',
    isOwner: true,
    isAdmin: false,
    uploadCount: 456,
    storageUsed: '4.2 GB',
    joinTime: '2023-01-15'
  },
  {
    userId: '2',
    nickname: '妈妈',
    avatar: 'https://picsum.photos/60/60?random=2',
    roleName: '管理员',
    isOwner: false,
    isAdmin: true,
    uploadCount: 623,
    storageUsed: '5.8 GB',
    joinTime: '2023-01-16'
  },
  {
    userId: '3',
    nickname: '小明',
    avatar: 'https://picsum.photos/60/60?random=3',
    roleName: '成员',
    isOwner: false,
    isAdmin: false,
    uploadCount: 89,
    storageUsed: '1.2 GB',
    joinTime: '2023-02-20'
  },
  {
    userId: '4',
    nickname: '小红',
    avatar: 'https://picsum.photos/60/60?random=4',
    roleName: '成员',
    isOwner: false,
    isAdmin: false,
    uploadCount: 67,
    storageUsed: '0.9 GB',
    joinTime: '2023-03-10'
  },
  {
    userId: '5',
    nickname: '奶奶',
    avatar: 'https://picsum.photos/60/60?random=5',
    roleName: '成员',
    isOwner: false,
    isAdmin: false,
    uploadCount: 13,
    storageUsed: '0.7 GB',
    joinTime: '2023-04-05'
  }
])

const pendingInvites = ref(2)
const sharedAlbumsCount = ref(8)
const canManageMembers = ref(true)

// 面板显示状态
const memberManageVisible = ref(false)
const inviteDialogVisible = ref(false)
const memberActionsVisible = ref(false)
const activityLogVisible = ref(false)

// 邀请相关
const inviteMethod = ref('')
const invitePhone = ref('')
const inviteEmail = ref('')
const inviteLink = ref('https://family.example.com/invite/abc123')
const inviteRole = ref('member')
const selectedMember = ref<any>(null)

// 活动日志
const activeFilter = ref('all')
const loadingActivities = ref(false)
const hasMoreActivities = ref(true)

const activityFilters = [
  { value: 'all', label: '全部' },
  { value: 'upload', label: '上传' },
  { value: 'share', label: '分享' },
  { value: 'member', label: '成员' },
  { value: 'system', label: '系统' }
]

const activities = ref([
  {
    id: '1',
    type: 'upload',
    description: '小明上传了 3 张照片到"春游相册"',
    createTime: '2024-01-20 14:30:00',
    userName: '小明',
    userAvatar: 'https://picsum.photos/40/40?random=3'
  },
  {
    id: '2',
    type: 'share',
    description: '妈妈分享了相册"生日聚会"给家庭成员',
    createTime: '2024-01-20 10:15:00',
    userName: '妈妈',
    userAvatar: 'https://picsum.photos/40/40?random=2'
  },
  {
    id: '3',
    type: 'member',
    description: '小红加入了家庭',
    createTime: '2024-01-19 16:45:00',
    userName: '小红',
    userAvatar: 'https://picsum.photos/40/40?random=4'
  },
  {
    id: '4',
    type: 'system',
    description: '系统自动备份了 156 个文件',
    createTime: '2024-01-19 02:00:00',
    userName: '系统',
    userAvatar: ''
  }
])

// 计算属性
const storagePercentage = computed(() => {
  return Math.round((familyInfo.value.storageUsedBytes / familyInfo.value.storageLimitBytes) * 100)
})

const filteredActivities = computed(() => {
  if (activeFilter.value === 'all') {
    return activities.value
  }
  return activities.value.filter(activity => activity.type === activeFilter.value)
})

// 方法
const editFamilyInfo = () => {
  Message.info('家庭信息编辑功能开发中')
}

const showMemberManage = () => {
  memberManageVisible.value = true
}

const hideMemberManage = () => {
  memberManageVisible.value = false
}

const showInviteManage = () => {
  Message.info('邀请管理功能开发中')
}

const showRoleManage = () => {
  Message.info('权限管理功能开发中')
}

const showStorageManage = () => {
  Message.info('存储管理功能开发中')
}

const showSharedAlbums = () => {
  Message.info('共享相册功能开发中')
}

const showActivityLog = () => {
  activityLogVisible.value = true
}

const hideActivityLog = () => {
  activityLogVisible.value = false
}

const showPrivacySettings = () => {
  Message.info('隐私设置功能开发中')
}

const showBackupSettings = () => {
  Message.info('备份设置功能开发中')
}

const showInviteDialog = () => {
  inviteDialogVisible.value = true
}

const hideInviteDialog = () => {
  inviteDialogVisible.value = false
  resetInviteForm()
}

const resetInviteForm = () => {
  inviteMethod.value = ''
  invitePhone.value = ''
  inviteEmail.value = ''
  inviteRole.value = 'member'
}

const inviteByPhone = () => {
  inviteMethod.value = 'phone'
}

const inviteByEmail = () => {
  inviteMethod.value = 'email'
}

const generateInviteLink = () => {
  inviteMethod.value = 'link'
  // TODO: 实际生成邀请链接
}

const showQRCode = () => {
  inviteMethod.value = 'qrcode'
  // TODO: 生成二维码
}

const copyInviteLink = () => {
  navigator.clipboard.writeText(inviteLink.value)
  Message.success('邀请链接已复制')
}

const cancelInvite = () => {
  hideInviteDialog()
}

const sendInvite = async () => {
  try {
    // TODO: 发送邀请请求
    Message.success('邀请已发送')
    hideInviteDialog()
  } catch (error) {
    Message.error('邀请发送失败')
  }
}

const showMemberActions = (member: any) => {
  selectedMember.value = member
  memberActionsVisible.value = true
}

const hideMemberActions = () => {
  memberActionsVisible.value = false
  selectedMember.value = null
}

const changeRole = () => {
  hideMemberActions()
  Message.info('修改角色功能开发中')
}

const setPermissions = () => {
  hideMemberActions()
  Message.info('设置权限功能开发中')
}

const viewMemberStats = () => {
  hideMemberActions()
  Message.info('成员统计功能开发中')
}

const removeMember = () => {
  hideMemberActions()
  Message.warning('移除成员功能开发中')
}

const setActivityFilter = (filter: string) => {
  activeFilter.value = filter
}

const loadMoreActivities = async () => {
  if (loadingActivities.value) return

  loadingActivities.value = true
  try {
    // TODO: 加载更多活动数据
    setTimeout(() => {
      loadingActivities.value = false
      // 模拟没有更多数据
      hasMoreActivities.value = false
    }, 1000)
  } catch (error) {
    loadingActivities.value = false
    Message.error('加载失败')
  }
}

const getActivityIcon = (type: string) => {
  const iconMap: Record<string, string> = {
    upload: 'tiny-icon-upload',
    share: 'tiny-icon-share',
    member: 'tiny-icon-user-add',
    system: 'tiny-icon-setting'
  }
  return iconMap[type] || 'tiny-icon-info'
}

const formatTime = (timeStr: string): string => {
  const now = new Date()
  const time = new Date(timeStr)
  const diff = now.getTime() - time.getTime()
  const minutes = Math.floor(diff / 60000)
  const hours = Math.floor(minutes / 60)
  const days = Math.floor(hours / 24)

  if (days > 0) {
    return `${days}天前`
  } else if (hours > 0) {
    return `${hours}小时前`
  } else if (minutes > 0) {
    return `${minutes}分钟前`
  } else {
    return '刚刚'
  }
}

// 生命周期
onMounted(() => {
  // 加载家庭信息
})
</script>

<style lang="scss" scoped>
.mobile-family-manage {
  min-height: 100vh;
  background: $gradient-primary;
  padding: $spacing-4;
  padding-bottom: calc(env(safe-area-inset-bottom) + #{$spacing-4});

  .family-info-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: $radius-2xl;
    padding: $spacing-6;
    margin-bottom: $spacing-6;

    .family-header {
      display: flex;
      align-items: flex-start;
      gap: $spacing-4;
      margin-bottom: $spacing-4;

      .family-avatar {
        width: 80px;
        height: 80px;
        border-radius: $radius-xl;
        background: $gradient-secondary;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .tiny-icon-group {
          color: white;
          font-size: 36px;
        }
      }

      .family-details {
        flex: 1;
        min-width: 0;

        .family-name {
          font-size: $font-size-xl;
          font-weight: $font-weight-bold;
          color: $gray-800;
          margin: 0 0 $spacing-1;
        }

        .family-desc {
          color: $gray-600;
          font-size: $font-size-sm;
          margin: 0 0 $spacing-3;
        }

        .family-stats {
          display: flex;
          gap: $spacing-4;

          .stat-item {
            text-align: center;

            .stat-number {
              display: block;
              font-size: $font-size-lg;
              font-weight: $font-weight-bold;
              color: $primary-500;
            }

            .stat-label {
              font-size: $font-size-xs;
              color: $gray-500;
            }
          }
        }
      }

      .edit-family-btn {
        width: 40px;
        height: 40px;
        background: rgba(255, 255, 255, 0.8);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: $radius-lg;
        color: $gray-600;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;

        &:hover {
          background: rgba(255, 255, 255, 0.9);
        }
      }
    }

    .storage-progress {
      .progress-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: $spacing-2;
        font-size: $font-size-sm;
        color: $gray-700;
      }

      .progress-bar {
        height: 6px;
        background: rgba($gray-300, 0.5);
        border-radius: $radius-full;
        overflow: hidden;

        .progress-fill {
          height: 100%;
          background: $gradient-primary;
          transition: width $duration-fast ease;

          &.warning {
            background: $gradient-warm;
          }

          &.danger {
            background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
          }
        }
      }
    }
  }

  .function-menu {
    .menu-section {
      margin-bottom: $spacing-6;

      .section-title {
        font-size: $font-size-lg;
        font-weight: $font-weight-semibold;
        color: white;
        margin-bottom: $spacing-4;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

      .menu-grid {
        display: flex;
        flex-direction: column;
        gap: $spacing-3;

        .menu-item {
          display: flex;
          align-items: center;
          gap: $spacing-3;
          padding: $spacing-4;
          background: rgba(255, 255, 255, 0.8);
          backdrop-filter: blur(20px);
          border: 1px solid rgba(255, 255, 255, 0.3);
          border-radius: $radius-xl;
          cursor: pointer;
          transition: all $duration-fast ease;

          &:hover {
            transform: translateY(-2px);
            box-shadow: $shadow-lg;
            background: rgba(255, 255, 255, 0.9);
          }

          .menu-icon {
            width: 48px;
            height: 48px;
            background: $gradient-primary;
            border-radius: $radius-lg;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 20px;
            flex-shrink: 0;
          }

          .menu-content {
            flex: 1;
            min-width: 0;

            .menu-title {
              display: block;
              font-size: $font-size-base;
              font-weight: $font-weight-semibold;
              color: $gray-800;
              margin-bottom: 2px;
            }

            .menu-subtitle {
              font-size: $font-size-sm;
              color: $gray-600;
            }
          }

          .menu-arrow {
            color: $gray-400;
            font-size: 16px;
            flex-shrink: 0;
          }
        }
      }
    }
  }

  // 面板样式
  .member-manage-panel,
  .activity-log-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: $z-index-modal;

    .panel-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
    }

    .panel-content {
      position: absolute;
      top: 10%;
      left: $spacing-4;
      right: $spacing-4;
      bottom: 10%;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: $radius-2xl;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: $spacing-4;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);

        h3 {
          font-size: $font-size-lg;
          font-weight: $font-weight-semibold;
          color: $gray-800;
          margin: 0;
        }

        .close-btn {
          width: 32px;
          height: 32px;
          background: transparent;
          border: none;
          color: $gray-500;
          cursor: pointer;
        }
      }

      .panel-body {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: $spacing-4;
      }
    }
  }

  .add-member-section {
    margin-bottom: $spacing-6;

    .add-member-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: $spacing-2;
      padding: $spacing-4;
      background: $gradient-primary;
      border: none;
      border-radius: $radius-xl;
      color: white;
      font-size: $font-size-base;
      font-weight: $font-weight-medium;
      cursor: pointer;
      transition: all $duration-fast ease;

      &:hover {
        transform: translateY(-1px);
        box-shadow: $shadow-lg;
      }
    }
  }

  .member-list {
    display: flex;
    flex-direction: column;
    gap: $spacing-3;

    .member-item {
      display: flex;
      align-items: center;
      gap: $spacing-3;
      padding: $spacing-4;
      background: rgba(255, 255, 255, 0.5);
      border-radius: $radius-lg;

      .member-avatar {
        width: 48px;
        height: 48px;
        border-radius: $radius-full;
        background: $gradient-primary;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        flex-shrink: 0;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .tiny-icon-user {
          color: white;
          font-size: 20px;
        }
      }

      .member-info {
        flex: 1;
        min-width: 0;

        .member-name {
          display: flex;
          align-items: center;
          gap: $spacing-2;
          font-size: $font-size-base;
          font-weight: $font-weight-semibold;
          color: $gray-800;
          margin-bottom: 2px;

          .owner-badge {
            padding: 2px $spacing-1;
            background: $gradient-primary;
            color: white;
            border-radius: $radius-sm;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
          }

          .admin-badge {
            padding: 2px $spacing-1;
            background: $gradient-secondary;
            color: white;
            border-radius: $radius-sm;
            font-size: $font-size-xs;
            font-weight: $font-weight-medium;
          }
        }

        .member-role {
          font-size: $font-size-sm;
          color: $gray-600;
          margin-bottom: 4px;
        }

        .member-stats {
          display: flex;
          gap: $spacing-2;
          font-size: $font-size-xs;
          color: $gray-500;

          span {
            white-space: nowrap;
          }
        }
      }

      .member-actions {
        .action-btn {
          width: 32px;
          height: 32px;
          background: transparent;
          border: none;
          color: $gray-400;
          cursor: pointer;
        }
      }
    }
  }

  // 邀请对话框
  .invite-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: $z-index-modal;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $spacing-4;
  }

  .invite-dialog {
    width: 100%;
    max-width: 400px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-radius: $radius-2xl;
    overflow: hidden;

    .dialog-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: $spacing-4;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);

      h3 {
        font-size: $font-size-lg;
        font-weight: $font-weight-semibold;
        color: $gray-800;
        margin: 0;
      }

      .close-btn {
        width: 32px;
        height: 32px;
        background: transparent;
        border: none;
        color: $gray-500;
        cursor: pointer;
      }
    }

    .dialog-content {
      padding: $spacing-4;
    }
  }

  .invite-methods {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: $spacing-3;
    margin-bottom: $spacing-4;

    .invite-method {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-4;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: $radius-lg;
      cursor: pointer;
      transition: all $duration-fast ease;

      &:hover {
        background: rgba(255, 255, 255, 0.7);
        transform: translateY(-2px);
      }

      span {
        font-size: $font-size-sm;
        color: $gray-700;
      }
    }
  }

  .invite-form {
    .form-group {
      margin-bottom: $spacing-4;

      label {
        display: block;
        margin-bottom: $spacing-2;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $gray-700;
      }

      .form-input {
        width: 100%;
        padding: $spacing-3;
        border: 1px solid rgba($gray-300, 0.3);
        border-radius: $radius-lg;
        font-size: $font-size-base;
        background: rgba(255, 255, 255, 0.5);
        outline: none;

        &:focus {
          border-color: $primary-500;
        }

        &.readonly {
          background: rgba($gray-100, 0.3);
          cursor: default;
        }
      }

      .link-group {
        display: flex;
        gap: $spacing-2;

        .copy-btn {
          width: 44px;
          height: 44px;
          background: $primary-500;
          border: none;
          border-radius: $radius-lg;
          color: white;
          cursor: pointer;
          flex-shrink: 0;
        }
      }

      .link-desc,
      .qrcode-desc {
        font-size: $font-size-xs;
        color: $gray-500;
        margin-top: $spacing-2;
      }

      .qrcode-container {
        display: flex;
        justify-content: center;
        margin-bottom: $spacing-2;

        .qrcode-placeholder {
          width: 150px;
          height: 150px;
          background: rgba($gray-100, 0.5);
          border-radius: $radius-lg;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: $gray-400;

          .tiny-icon-qrcode {
            font-size: 48px;
            margin-bottom: $spacing-2;
          }
        }
      }
    }

    .role-selection {
      margin-bottom: $spacing-4;

      label {
        display: block;
        margin-bottom: $spacing-2;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        color: $gray-700;
      }

      .role-options {
        display: flex;
        gap: $spacing-4;

        .role-option {
          display: flex;
          align-items: center;
          gap: $spacing-2;
          cursor: pointer;

          input[type="radio"] {
            margin: 0;
          }

          span {
            font-size: $font-size-sm;
            color: $gray-700;
          }
        }
      }
    }

    .form-actions {
      display: flex;
      gap: $spacing-3;
      justify-content: flex-end;

      .form-btn {
        padding: $spacing-2 $spacing-4;
        border: 1px solid rgba($gray-300, 0.3);
        border-radius: $radius-lg;
        font-size: $font-size-sm;
        cursor: pointer;

        &.secondary {
          background: transparent;
          color: $gray-600;
        }

        &.primary {
          background: $primary-500;
          border-color: $primary-500;
          color: white;
        }
      }
    }
  }

  // 成员操作菜单
  .member-actions-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: $z-index-modal;

    .actions-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.5);
    }

    .actions-content {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border-radius: $radius-2xl $radius-2xl 0 0;
      padding-bottom: env(safe-area-inset-bottom);

      .actions-header {
        padding: $spacing-4;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);

        .member-info {
          display: flex;
          align-items: center;
          gap: $spacing-3;

          .member-avatar {
            width: 48px;
            height: 48px;
            border-radius: $radius-full;
            background: $gradient-primary;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }

            .tiny-icon-user {
              color: white;
              font-size: 20px;
            }
          }

          .member-details {
            .member-name {
              font-size: $font-size-base;
              font-weight: $font-weight-semibold;
              color: $gray-800;
              margin-bottom: 2px;
            }

            .member-role {
              font-size: $font-size-sm;
              color: $gray-600;
            }
          }
        }
      }

      .actions-list {
        .action-item {
          width: 100%;
          display: flex;
          align-items: center;
          gap: $spacing-3;
          padding: $spacing-4;
          background: transparent;
          border: none;
          color: $gray-700;
          font-size: $font-size-base;
          cursor: pointer;
          transition: background $duration-fast ease;

          &:hover {
            background: rgba($gray-100, 0.5);
          }

          &.danger {
            color: $error;
          }
        }
      }
    }
  }

  // 活动日志
  .activity-filters {
    display: flex;
    gap: $spacing-2;
    margin-bottom: $spacing-4;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    &::-webkit-scrollbar {
      display: none;
    }

    .filter-btn {
      padding: $spacing-2 $spacing-3;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: $radius-full;
      color: $gray-600;
      font-size: $font-size-sm;
      cursor: pointer;
      white-space: nowrap;
      transition: all $duration-fast ease;

      &.active {
        background: $primary-500;
        border-color: $primary-500;
        color: white;
      }
    }
  }

  .activity-list {
    display: flex;
    flex-direction: column;
    gap: $spacing-3;

    .activity-item {
      display: flex;
      align-items: flex-start;
      gap: $spacing-3;
      padding: $spacing-3;
      background: rgba(255, 255, 255, 0.3);
      border-radius: $radius-lg;

      .activity-icon {
        width: 36px;
        height: 36px;
        border-radius: $radius-full;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
        flex-shrink: 0;

        &.upload { background: $media-photo; }
        &.share { background: $success; }
        &.member { background: $info; }
        &.system { background: $gray-500; }
      }

      .activity-content {
        flex: 1;
        min-width: 0;

        .activity-text {
          font-size: $font-size-sm;
          color: $gray-700;
          margin-bottom: 4px;
          line-height: 1.4;
        }

        .activity-time {
          font-size: $font-size-xs;
          color: $gray-500;
        }
      }

      .activity-user {
        .user-avatar {
          width: 24px;
          height: 24px;
          border-radius: $radius-full;
          background: $gray-300;
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .tiny-icon-user {
            color: white;
            font-size: 12px;
          }
        }
      }
    }
  }

  .load-more {
    margin-top: $spacing-4;
    text-align: center;

    .load-more-btn {
      display: inline-flex;
      align-items: center;
      gap: $spacing-2;
      padding: $spacing-2 $spacing-4;
      background: rgba(255, 255, 255, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: $radius-full;
      color: $gray-600;
      font-size: $font-size-sm;
      cursor: pointer;
    }
  }
}

// 动画
.slide-up-enter-active,
.slide-up-leave-active {
  transition: transform $duration-normal ease;
}

.slide-up-enter-from,
.slide-up-leave-to {
  transform: translateY(100%);
}

.modal-enter-active,
.modal-leave-active {
  transition: opacity $duration-normal ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

// 暗色主题
[data-theme="dark"] {
  .mobile-family-manage {
    .family-info-card,
    .menu-item,
    .panel-content,
    .invite-dialog,
    .actions-content {
      background: rgba(0, 0, 0, 0.8);
      border-color: rgba(255, 255, 255, 0.1);

      .family-name,
      .menu-title,
      h3 {
        color: $gray-200;
      }

      .family-desc,
      .menu-subtitle {
        color: $gray-400;
      }
    }

    .member-item,
    .activity-item,
    .invite-method,
    .filter-btn,
    .load-more-btn {
      background: rgba(255, 255, 255, 0.1);
      border-color: rgba(255, 255, 255, 0.1);
      color: $gray-300;
    }
  }
}
</style>
